import React, { useState } from 'react';
import { Input, Button, List, Divider, Space } from 'antd'
import { addSAction, addNAction } from '@/store/reducers/countReducer'
import { useSelector, useDispatch } from 'react-redux'
import { addTodoAction } from '../store/reducers/todoReducer'

export default function Todo() {
  const [txt, setTxt] = useState('');
  // const num = useSelector((state) => state.num);
  const num = useSelector((state) => state.count.num);
  const todoList = useSelector((state) => state.todo);
  const dispatch = useDispatch();

  const onSubmitTodo = () => {
    dispatch(addTodoAction({
      txt,
      id: Date.now(),
      flag: false
    }));
    setTxt('');
  }
  const onTodoDel = (id) => {
    console.log('删除：', id)
  }

  return (
    <div>
      <h3>Todo</h3>
      <div>
        <span>{num}</span>
        <Button onClick={() => dispatch(addSAction())}>按钮</Button>
        <Button onClick={() => dispatch(addNAction(5))}>按钮+n</Button>
      </div>
      <Divider />
      <div className='todo-app'>
        <Space direction="vertical" size="middle"
          style={{
            display: 'flex',
          }}>
          <Input.Group compact className='todo-form'>
            <Input style={{
              width: 'calc(100% - 64px)',
            }} value={txt} onChange={(e) => setTxt(e.target.value)} placeholder='请输入待办事项' />
            <Button type="primary" onClick={onSubmitTodo}>提交</Button>
          </Input.Group>

          <div className='todo-list'>
            <List
              size="large"
              bordered
              dataSource={todoList}
              renderItem={(item) => <List.Item actions={[<Button>编辑</Button>, <Button onClick={() => onTodoDel(item.id)}>删除</Button>]}>{item.txt}</List.Item>}
            />
          </div>
        </Space>

      </div>
    </div>
  )
}
